<%--
  Created by IntelliJ IDEA.
  User: Damon
  Date: 2018/4/18
  Time: 20:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap/js/bootstrap.min.js"></script>
<link href="bootstrap/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="bootstrap/bootstrap-dialog/dist/js/bootstrap-dialog.min.js"></script>
<link href="bootstrap/bootstrap-dialog/dist/css/bootstrap-dialog.css" type="text/css" rel="stylesheet"/>
<link href="bootstrap/bootstrap-treeview/dist/bootstrap-treeview.min.css"  type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="bootstrap/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap-table/dist/bootstrap-table.js"></script>
<link href="bootstrap/bootstrap-table/dist/bootstrap-table.css"  type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="bootstrap/bootStrap-addTabs/bootstrap.addtabs.js"></script>
<link href="bootstrap/bootStrap-addTabs/bootstrap.addtabs.css"  type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="bootstrap/bTabs-master/b.tabs.min.js"></script>
<link href="bootstrap/bTabs-master/b.tabs.css"  type="text/css" rel="stylesheet"/>
<body>

     <table id="shoppingcartable" >



      </table>

<script>

   $(function(){


       $("#shoppingcartable").bootstrapTable({
           url:'http://localhost:8089/user/pageShoppingcar',
           method: 'get',
           dataType:'json',
           striped: true,//设置为 true 会有隔行变色效果
           undefinedText: "空",//当数据为 undefined 时显示的字符
           pagination: true, //分页
           showRefresh: true,
           // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
           showToggle: "true",//是否显示 切换试图（table/card）按钮
           showColumns: "true",//是否显示 内容列下拉框
           pageNumber: 1,//如果设置了分页，首页页码
           showPaginationSwitch:true,//是否显示 数据条数选择框
           pageSize: 8,//如果设置了分页，页面数据条数
           pageList: [2, 4, 6, 8],  //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
           paginationPreText: '‹㊧',//指定分页条中上一页按钮的图标或文字,这里是<
           paginationNextText: '㊨›',//指定分页条中下一页按钮的图标或文字,这里是>
           // singleSelect: false,//设置True 将禁止多选
           //search: true, //显示搜索框
           data_local: "zh-US",//表格汉化
           sidePagination: "server", //服务端处理分页
           idField: "shopid",//指定主键列
           columns: [
               {
                   checkbox: true,
                   visible: true                  //是否显示复选框
               },

               {
                   title: '编号',//表的列名
                   field: 'shopid',//json数据中rows数组中的属性名
                   align: 'center'//水平居中
               },

               {
                   title: '品牌',
                   field: 'shopname',
                   align: 'center'
               },
               {
                   title: '价格',
                   align: 'center',
                   field: 'shopprice'
               },{
                   title: '操作',
                   align: 'center',
                   formatter: function (value, row, index) {//自定义显示可以写标签哦~

                       return   "<button type=\"button\" class=\"btn btn-info\">加入购物车</button>"


                   }
               }

           ]
       })

   })






</script>

</body>
</html>
